<template>
  <div class="flower-table-container">
    <div style="width: 1600px;margin: 0 auto;background-color: white" >
      <table class="flower-table">

        <tbody>
        <!--      最上面筛选-->
        <span style="color: rgba(0,0,0,0.3)">全部结果>{{"玫瑰花"}}</span><hr>

        <div style="background-color: #f2f2f2">
          <el-button>综合排序</el-button>
          <el-button>销量</el-button>
          <el-button>价格</el-button>
          <el-button>最新</el-button>
        </div>
        <!--最下面图片-->
        <div class="image-row">
          <div v-for="(flower, index) in currentPageItems" :key="index" class="image-container">
           <img :src="flower.imageUrl" style="width: 90%;height: 60%;margin:10px 5px" alt="Flower" @click="xq"/>
              <p class="phd" style="font-size: 25px">{{flower.name}}</p>
              <p class="phd2">描述: {{flower.descriptiom}}</p>
              <p class="money">￥{{flower.price}}</p>
              <el-button type="primary"  class="may">加入购物车</el-button>
          </div>
        </div>
        <!--最下边分页功能-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[12]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems">
        </el-pagination>
        </tbody>
      </table>

    </div>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue';
import {ElPagination} from "element-plus";
import router from "@/router";

// 假设这是你的鲜花数据数组
const flowers = ref([
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},
  { price: '150',imageUrl: 'mgh.png',name:'爱情鲜花玫瑰',descriptiom:'52朵玫瑰谐音吾爱，代表爱意深厚'},

]);
const xq=()=>{
     router.push('/search')
}
const currentPage = ref(1);
const pageSize = ref(9);
const totalItems = ref(flowers.value.length);

// 计算当前页的数据
const currentPageItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return flowers.value.slice(start, end);
});

// 分页大小改变事件
function handleSizeChange(val) {
  pageSize.value = val;
  currentPage.value = 1;
}
// 当前页码改变事件
function handleCurrentChange(val) {
  currentPage.value = val;
}

</script>

<style scoped>
.flower-table-container {
  width: 100%;
  margin-bottom: 20px;
}

.phd{
  margin-left: 20px;
  width: 420px;
}
.phd2{
  margin-left: 20px;
}
.money{
  display: inline-block;
  margin-left: 20px;
  width: 200px;
  height: 40px;
  color: pink;
  font-size: 25px;
}
.may{
  margin-left: 60px;
  width: 200px;
  height: 40px;
  background-color: pink;
  border: pink;
}
.image-container {
  margin-bottom: 10px;
  margin-left: 1px;
  background-color: #f2f2f2;

}

.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 使用 gap 属性来添加间距，如果浏览器不支持 gap，则使用 margin */
  justify-content: flex-start;
  margin-top: 10px;
}

.image-container {
  flex: 0 0 calc(33.333% - 10px); /* 减去间隙的一半 */
  max-width: calc(33% - 1px); /* 防止内容溢出 */
  width: 1500px;
  margin-bottom: 10px; /* 如果不使用 gap 属性，则手动添加底部间距 */
}


</style>